<template>
  <lay-container class="user-index" :fluid="true" style="padding: 10px">
    <lay-row :span="24" style="display: flex">
      <lay-col :xs="24">
        <lay-card shadow="hover" class="info-user">
          <div style="text-align: center">
            <lay-avatar :src="myUserDetail.profilePhoto" radius class="user-avatar"></lay-avatar>
            <div class="user-nickName">{{myUserDetail.nickName}}</div>
            <div class="user-briefing">{{myUserDetail.signature}}</div>
          </div>

          <lay-row>
            <lay-icon type="layui-icon-face-smile"> </lay-icon>&nbsp;&nbsp;&nbsp;{{myUserDetail.username}}
          </lay-row>
          <lay-row>
            <lay-icon type="layui-icon-cellphone"> </lay-icon>&nbsp;&nbsp;&nbsp;{{myUserDetail.phone}}
          </lay-row>
          <lay-row>
            <lay-icon type="layui-icon-username"> </lay-icon>&nbsp;&nbsp;
            <span v-for="userRole in myUserDetail.userRoleVOList">{{userRole.roleName}}&nbsp;&nbsp;</span>
          </lay-row>

          <lay-line border-style="dashed" border-width="1px"></lay-line>
          <lay-row>
            <h1 style="margin: 10px 0">标签</h1>
            <lay-tag v-for="tag in tagsList" :key="tag.id" style="margin: 0 6px 6px 0">
              &nbsp;&nbsp;{{ tag.tag }}
            </lay-tag>
          </lay-row>
        </lay-card>
      </lay-col>

      <lay-col style="flex: 1; background-color: #fff" :xs="24">
        <lay-tab type="brief" v-model="activeTab">
          <lay-tab-item title="基本信息" id="baseInfo">
            <base-info :my-user="myUserDetail" :my-role-list="roleSimpleList" @refreshParent="toDetailMe"></base-info>
          </lay-tab-item>
          <lay-tab-item title="密码重置" id="resetPasswordInfo">
            <reset-password></reset-password>
          </lay-tab-item>
        </lay-tab>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {detailMe} from '@/api/module/myUser'
import baseInfo from './baseInfo.vue'
import resetPassword from './resetPassword.vue'
import {MyUserInfo} from "@/library/myTs";


const tagsList = ref([
  { id: 1, tag: '雪', theme: 'blue' },
  { id: 2, tag: '风是从哪儿来wu', theme: '' },
  { id: 3, tag: '漫游星河', theme: 'orange' },
  { id: 4, tag: '春日之花', theme: 'green' },
  { id: 5, tag: 'Hey', theme: 'cyan' },
  { id: 6, tag: '风吹一夏', theme: '' }
])


// 数据初始化
const myUserDetail = ref<MyUserInfo>({
  id: 0,
  username: '',
  email: '',
  nickName: '',
  status: '',
  source: '',
  signature: '',
  profilePhoto: '',
  birthday: '',
  note: '',
  defaultRoleCode:'',
  wxUserId: 0,
  wxUserName: '',
  userRoleVOList: [{
    roleName: '',
    roleCode: '',
    status: '',
    defaultRole: ''
  }],
  phone: '',
  sex: ''
})

// 初始化数据
onMounted(()=>{
  toDetailMe();
})

// 角色列表
const roleSimpleList = ref<Array<{label: string,value:string}>>([])
const toDetailMe = ()=>{
  roleSimpleList.value = []
  detailMe().then(res=>{
    myUserDetail.value = res.data;
    const roleVOList = res.data.userRoleVOList;
    Object.keys(roleVOList).forEach((item) => {
      const option = {label: roleVOList[item].roleName,value:roleVOList[item].roleCode}
      roleSimpleList.value.push(option)
    })
  })

}

// 切换tab
const activeTab = ref('baseInfo')

</script>

<style scoped>
.user-index{
  height: calc(100vh - 150px);
}

.layui-tag .layui-tag-text {
  margin: 0 8px 8px 0;
}
.info-user {
  height: calc(100vh - 150px);
  max-width: 400px;
  padding: 20px;
  margin-right: 10px;
}
.user-avatar {
  width: 40%;
  height: 40%;
}
.user-nickName {
  font-size: 24px;
  margin: 15px;
}
.user-briefing {
  color: #0006;
  font-size: 14px;
  margin-bottom: 10px;
}

</style>